<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/css/style.css" />
<link rel="stylesheet" href="static/css/tcommon.css" />
<script src="static/jquery/jquery-1.12.4.js"></script>
<script src="static/easyui/jquery.easyui.min.js"></script>
<script src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<title>帖子详情</title>
</head>
<style>
#info{padding:10px;}
.lt-title{
text-align:center;
}
.img-list{margin-top:10px;}
.img-list>div{
	float:left;
	width:25%;
	margin-bottom:5px;
}
.clear:after{
content:'';
display:block;
clear:both;
}
.btn-replay .d-btn{
    border: 0;
    padding: 4px 15px;
    margin-top:10px;
}.info-list{border-bottom:1px solid #eee;padding:10px 0;}
</style>
<body>
	<div id="info"></div>
	<div id="proDlg" class="easyui-dialog info_dialog" style="width: 800px; padding: 10px 20px; top: 30px;"
		closed="true" buttons="#pro-dlg-buttons">
		<form id="proFm" method="post">
			<div class="content_container">
				<table class="content_table">
					<tr>
						<td style="width: 100px;">内容：</td>
						<td colspan="3">
							<input class="easyui-textbox" data-options="required:true,multiline:true" id="content" name="content"
								style="width: 550px; height: 100px;" />
						</td>
					</tr>
					<tr>
						<td style="width: 100px;">上传图片：</td>
						<td>
							<input class="easyui-filebox"
								data-options="prompt:'添加文件', buttonText:'选择附件',multiple:true,accept:'image/*'" id="images"
								name="images" style="width: 300px;" />
						</td>
					</tr>
				</table>
			</div>
		</form>
	</div>
	<div id="pro-dlg-buttons">
		<a href="# " class="easyui-linkbutton ok" onclick="savePro()">保存</a>
		<a href="# " class="easyui-linkbutton btn-cancel " onclick="javascript:$('#proDlg').dialog('close')">关闭</a>
	</div>
	<div id="childDlg" class="easyui-dialog info_dialog" style="width: 800px; padding: 10px 20px; top: 30px;"
		closed="true" buttons="#child-dlg-buttons">
		<form id="childFm" method="post">
			<div class="content_container">
				<table class="content_table">
					<tr>
						<td style="width: 100px;">内容：</td>
						<td colspan="3">
							<input class="easyui-textbox" data-options="required:true,multiline:true" id="content1" name="content1"
								style="width: 550px; height: 100px;" />
						</td>
					</tr>
					<tr>
						<td style="width: 100px;">上传图片：</td>
						<td>
							<input class="easyui-filebox"
								data-options="prompt:'添加文件', buttonText:'选择附件',multiple:true,accept:'image/*'" id="images1"
								name="images1" style="width: 300px;" />
						</td>
					</tr>
				</table>
			</div>
		</form>
	</div>
	<div id="child-dlg-buttons">
		<a href="# " class="easyui-linkbutton ok" onclick="saveChild()">保存</a>
		<a href="# " class="easyui-linkbutton btn-cancel " onclick="javascript:$('#childDlg').dialog('close')">关闭</a>
	</div>
</body>

<script th:inline="javascript">
	var currentPro;
	var currentChild;
	var forumPost =[[${forumPost}]];
	$(document).ready(function() {
		var html="";
		if(forumPost.status==1){
			html+='<h3 class="lt-title"><div><span>'+forumPost.title+'</span></div></h3>'	
		}else{
			html+='<h3 class="lt-title"><div><span>'+forumPost.title+'</span><span style="position:relative;top: -10px;color: red;left: 5px;font-size: 16px;">精</span></div></h3>'
		}
		html+='<div><div class="info-list"><div>'+forumPost.content+'</div><div class="clear img-list">'
		$.each(forumPost.attachments,function(i,val){
			html+= '<div class="col-md-3"><img onclick="window.open(\'../'+val.url+
					'\',\'_blank\', \' toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no\');" '+
					'style="width:100px;height:100px;" src="/'+val.url+'"></div>';
		});
		html+='</div><div class="text-right"><div><span>'+forumPost.user.name+'</span>  <span>发布于：'
		+formatDate(forumPost.createdate)+'</span>  <span>ip：</span><span>'+forumPost.createip+'</span></div></div>'
		html+="<div class='text-right btn-replay'><input type='button' class='d-btn btn-blue' onclick='newPro()' value='回复' /></div></div>"
		$.each(forumPost.replies,function(i,val){
			if(val.parent!=null){
				html+='<h5><div><span>引用'+val.parent.user.name+'于：'+formatDate(val.parent.createdate)+'发表的</span></div>'
				html+='<div><div>'+val.parent.content+'</div></h5>'
			}else{
				
			}
			html+='<div class="info-list" ><div>'+val.content+'</div><div class="clear img-list">'
			$.each(val.attachments,function(i,val){
				html+= '<div class="col-md-3"><img onclick="window.open(\'../'+val.url+
						'\',\'_blank\', \' toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no\');" '+
						'style="width:100px;height:100px;" src="/'+val.url+'"><br></div>';
			
			});
			html+='</div><div><div class="info-head text-right"><span>'+val.user.name+'</span>  <span>评论于：'
			+formatDate(val.createdate)+'</span>  <span>ip：</span><span>'+val.createip+'</span></div></div>'
			html+="<div class='text-right btn-replay'><input class='d-btn btn-blue' type='button' onclick='newChild("+i+")' value='回复本楼' /></div></div>"
		})
		$("#info").append(html);
	});

	function newPro() {
		$("#proDlg").dialog('open').dialog('setTitle', '评论');
		$("#proFm").form('clear');
		currentPro = {};
	}
	function savePro() {
		if (!$("#proFm").form('validate'))
			return;
		var formData = new FormData();
		formData.append("postid", forumPost.id);
		formData.append("content", $("#content").textbox('getValue'));
		var images = document.getElementById("filebox_file_id_1").files;
		for(var i = 0;i < images.length;i++){
			formData.append('images', images[i]);
		}
		$.ajax({
			type : 'POST',
			url : "forumReplySave.do",
			cache : false,
			data : formData,
			processData : false,
			contentType : false,
			success : function(data) {
				if (data.success){
					$.messager.show({
						title : '评论',
						msg : '评论成功',
						timeout : 5000,
						showType : 'slide'
					});
					window.setInterval("location.reload()", 2000);
				}else{
					$.messager.alert('评论', '评论失败', 'error');
				}
				$('#proDlg').dialog('close');
			},
			dataType : "json"
		});
	}
	function newChild(i) {
		currentChild = forumPost.replies[i];
		$("#childDlg").dialog('open').dialog('setTitle', '评论');
		$("#childFm").form('clear');
	}
	function saveChild() {
		if (!$("#childFm").form('validate'))
			return;
		var formData = new FormData();
		formData.append("postid", forumPost.id);
		formData.append("parentid", currentChild.id);
		formData.append("content", $("#content1").textbox('getValue'));
		var images = document.getElementById("filebox_file_id_2").files;
		for(var i = 0;i < images.length;i++){
			formData.append('images', images[i]);
		}
		$.ajax({
			type : 'POST',
			url : "forumReplySave.do",
			cache : false,
			data : formData,
			processData : false,
			contentType : false,
			success : function(data) {
				if (data.success){
					$.messager.show({
						title : '评论',
						msg : '评论成功',
						timeout : 5000,
						showType : 'slide'
					});
					window.setInterval("location.reload()", 2000);
				}else{
					$.messager.alert('评论', '评论失败', 'error');
				}
				$('#childDlg').dialog('close');
			},
			dataType : "json"
		});
	}
	function formatDate(time) {
		var date = new Date(time);
		var year = date.getFullYear();
		var month = date.getMonth() + 1; //月份是从0开始的
		if (month < 10){
			month = "0" + month;
		}
		var day = date.getDate();
		if (day < 10){
			day = "0" + day;
		}
		var hour = date.getHours();
		if (hour < 10){
			hour = "0" + hour;
		}
		var min = date.getMinutes();
		if (min < 10){
			min = "0" + min;
		}
		var sec = date.getSeconds();
		if (sec < 10){
			sec = "0" + sec;
		}
		var newTime = year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
		return newTime;
	}
</script>
</html>